<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ASN新增 - Mubea</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<link rel="shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link href="../source/css/base.css" rel="stylesheet" type="text/css" />
<link href="../source/css/main.css" rel="stylesheet" type="text/css" />
<link href="../source/css/element-ui@2.4.0.index.css" rel="stylesheet" type="text/css" />

</head>
    <div id="app" class="asn-add-page">
        <!--<div class="header">
            <div class="base-width cf">
                <a href="./main.html" class="fl">
                    <img class="logo" src="../source/img/logo.png" alt="" />
                </a>

                <el-dropdown class="username fr" v-if="username" v-cloak>
                      <span class="el-dropdown-link">
                        {{username}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                      </span>
                    <el-dropdown-menu class="username-dropdown" slot="dropdown">
                        <el-dropdown-item>
                            <a href="javascript:;" @click="loginout">退出</a>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>-->
        <asn-header></asn-header>

        <div class="base-width">
            <div class="banner">
                <img src="../source/img/asn_add_banner.png" alt="">
            </div>

            <div class="history-list">
                <el-table
                        v-loading="loading"
                        :data="formData.OrderLists"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="ConsigneeName"
                            label="Consignee Name"
                            width="180">
                        <template slot-scope="scope">
                            <el-input  v-model="scope.row.ConsigneeName" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.ConsigneeName}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="ConsigneeAddress"
                            label="Consignee Address"
                            width="280">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.ConsigneeAddress" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.ConsigneeAddress}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Vendorno"
                            label="Vendor no."
                            width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Vendorno" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Vendorno}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="POnumber"
                            label="PO number"
                            width="220">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.POnumber" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.POnumber}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Supplierdeliverynote"
                            label="Supplier delivery note"
                            width="280">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Supplierdeliverynote" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Supplierdeliverynote}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Item"
                            label="Item"
                            min-width="105">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Item" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Item}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Deliverydate"
                            label="Delivery date"
                            width="150">
                        <template slot-scope="scope">
                            <el-date-picker
                                    v-if="!saveSuccess"
                                    placeholder="请选择日期"
                                    v-model="scope.row.Deliverydate"
                                    format="yyyy/MM/dd"
                                    clear-icon="el-icon-error"
                                    value-format="yyyy/MM/dd">
                            </el-date-picker>
                            <span v-else>{{scope.row.Deliverydate}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Windowtime"
                            label="Window time"
                            width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Windowtime" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Windowtime}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Materialno"
                            label="Material no."
                            width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Materialno" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Materialno}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Vendormaterialno"
                            label="Vendor material no."
                            width="250">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Vendormaterialno" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Vendormaterialno}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Deliveryqty"
                            label="Delivery qty"
                            width="105">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Deliveryqty" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Deliveryqty}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Batch"
                            label="Batch"
                            width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Batch" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Batch}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Packagematerial"
                            label="Package material"
                            width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Packagematerial" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Packagematerial}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Packageqty"
                            label="Package qty."
                            width="115">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Packageqty" placeholder="请输入内容" v-if="!saveSuccess"></el-input>
                            <span v-else>{{scope.row.Packageqty}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                        v-if="!saveSuccess"
                        fixed="right"
                        label="删除"
                        align="center"
                        width="80">
                        <template slot-scope="scope">
                            <span class="delete" @click="deleteRow(scope.$index)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="btn-box">
                <el-button class="search-btn" @click="addNewRow" v-if="!saveSuccess">新增一行</el-button>
                <el-button class="search-btn" @click="createNewForm" v-if="saveSuccess">新增ASN</el-button>
                <el-button type="primary" class="download-btn" @click="saveRows" v-if="!saveSuccess">保存</el-button>
            </div>

            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="40%">
                    <ul class="clearfix">
                        <li v-html="errorList"></li>
                    </ul>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">知道了</el-button>
                </span>
            </el-dialog>
        </div>
    </div>



<script src="../source/js/lib/vue.min.js"></script>
<script src="../source/js/lib/jquery.min.js"></script>
<script src="../source/js/lib/element-ui@2.4.0.index.js"></script>
<script src="../source/js/common.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data : {
            "username":decodeURIComponent(getCookie('username')),
            loading:false,
            type:'',
            pageTotal:1,
            /*dataFormat:{
                Batch: "111",
                ConsigneeAddress: "1",
                ConsigneeName: "1",
                Deliverydate: "1",
                Deliveryqty: "1",
                Item: "1",
                Materialno: "0053.2333",
                POnumber: "1",
                Packagematerial: "1",
                Packageqty: "1",
                Supplierdeliverynote: "1",
                Vendormaterialno: "1",
                Vendorno: "297",
                Windowtime: "11"
            },*/
            dataFormat:{
                Batch: "",
                ConsigneeAddress: "",
                ConsigneeName: "",
                Deliverydate: "",
                Deliveryqty: "",
                Item: "",
                Materialno: "",
                POnumber: "",
                Packagematerial: "",
                Packageqty: "",
                Supplierdeliverynote: "",
                Vendormaterialno: "",
                Vendorno: "",
                Windowtime: ""
            },
            // listData: [],
            formData:{
                "username":decodeURIComponent(getCookie('username')),
                "pwd":"",
                "account":user.account,
                "OrderLists":[]
            },
            saveSuccess:false, // 是否已经保存
            errorList:[], // 多行报错信息数组
            dialogVisible:false
        },
        methods:{
            apiNewASN:function(){
                var _this = this;
                this.loading = true;
                $.ajax({
                    url:apiUrl2+'/NewASN',
                    type:'POST',
                    data:{'json':JSON.stringify(_this.formData)},
                    cache:false,
                    //dataType :'jsonp',
                    success:function(datas){
                        _this.loading = false;
                        if(datas.Success===true){
                            _this.saveSuccess = true;
                            _this.$message.success('恭喜，新增ASN成功');
                        }else{
                            if(datas.Msg){
                                if(datas.errorCount > 1){
                                    _this.dialogVisible = true;
                                    // _this.errorList = datas.Msg.split()
                                    _this.errorList = datas.Msg;
                                }else{
                                    _this.$message.error(datas.Msg.replace(/\<br\>/g,''));
                                }
                            }
                        }
                    },
                    error:function(datas){
                        // console.log(datas)
                        _this.loading = false;
                        datas.Msg && _this.$message.error(datas.Msg);
                    },
                    complete:function(){
                        _this.loading = false;
                    }
                });
            },
            addNewRow:function(){
                var json = JSON.parse(JSON.stringify(this.dataFormat));
                this.formData.OrderLists.push(json);
            },
            deleteRow:function(index){
                this.formData.OrderLists.splice(index,1);
            },
            createNewForm:function(){
                this.saveSuccess = false;
                var json = JSON.parse(JSON.stringify(this.dataFormat));
                this.formData.OrderLists = [] ;
                this.formData.OrderLists.push(json) ;
            },
            saveRows:function(){
                var isBreak = false;
                for(var i = 0; i < this.formData.OrderLists.length;i++){
                    if(isBreak) break;
                    var row = this.formData.OrderLists[i];
                    console.log('i',i);
                    for(v in row){
                        console.log('v',v)
                        if(row[v].replace(/(^\s*)|(\s*$)/g, "") == ""){
                            this.$message.error("字段不能为空，请确认所有字段都填写后再保存");
                            isBreak = true;
                            break;
                        }
                    }
                }

                if(!isBreak){
                    this.apiNewASN();
                }
            },
            // isLogin:function(){
            //     var username = getCookie('username');
            //     var type = getCookie('type');
            //     if(username && username != 'undefined' && type &&  type != 'undefined'){
            //         return true;
            //     }
            //     return false;
            // },
            /*loginout:function(){
                removeCookie('username');
                removeCookie('type');
                location.href='./login.html';
            }*/
        },
        created:function(){
            this.type = getCookie('type');
            // if(!this.isLogin()){ //登录
            //     location.href = './login.html';
            // }

            // 初始化新增一行
            this.addNewRow();
        },
        /*mounted:function(){
            const h = this.$createElement;
            this.$message({
                type:'error',
                message: h('p', null, [
                    h('span', null, '内容可以是 '),
                    h('div', { style: 'color: teal' }, 'VNode'),
                    h('div', { style: 'color: teal' }, 'VNode'),
                    h('div', { style: 'color: teal' }, 'VNode'),
                    h('div', { style: 'color: teal' }, 'VNode'),
                    h('div', { style: 'color: teal' }, 'VNode'),
                    h('div', { style: 'color: teal' }, 'VNode'),
                ])
            });
        }*/
    })
</script>
</body>
</html>